<template>
	<div style="height:80vh">
		<div style="display: flex; justify-content: space-between;">
			<h3>课程管理</h3>
			<p></p>
			<h4><button @click="go2Add()">添加新课程</button></h4>
			<p></p>
		</div>
		<hr>
		<div style="position: relative;">
			<div>
				<div style="width: 90% ;">
					<table border="1" style="width: 95%">
						<tr style="background-color: gainsboro">
							<th>班级编号</th>
							<th>班级名称</th>
							<th>修改操作</th>
							<th>删除操作</th>
						</tr>
						<tr v-for="course in data.courses">
							<td>{{course.cno}}</td>
							<td>{{course.cname}}</td>
							<td><button @click="go2Update(course)">修改</button></td>
							<td><button @click="del(course.cno)">删除</button></td>
						</tr>
					</table>
				</div>
			</div>
			<div id="data" style="position: absolute;" v-show="data.inState == true">
				<div style="background-color: aqua;width: 100%;height: 5vh;font-size: 1.5rem;">
					课程 - {{data.stateName[state]}}
				</div>
				<br />
				<table width="80%" align="center" border="1" cellspacing="0" style="line-height: 35px;">
					<tbody>
						<tr>
							<td>课程编号</td>
							<td><input type="text" v-model="data.course.cno" v-bind:readonly="data.state==0" /></td>
						</tr>
						<tr>
							<td>课程名称</td>
							<td><input type="text" v-model="data.course.cname" /></td>
						</tr>
					</tbody>
				</table>
				<div style="display: flex; justify-content: space-between;">
					<p>&nbsp;</p>
					<p><button @click="data.inState=false;">取消</button></p>
					<p><button @click="save()">保存</button></p>
					<p>&nbsp;</p>
				</div>
			</div>
		</div>
	</div>
</template>

<script setup>
	import { onMounted, reactive } from 'vue';
	import store from '@/store';
	import { $get, $postj } from '@/ajax'
	
	const data = reactive({
		course: {},
		courses: [],
		stateName: ['修改', '添加'],
		state: 1 ,// 0 修改    1  添加
		inState:false
	})
	const go2Add = () => {
			data.state = 1;// 添加
			data.course = {};// 重置对象变量为初始
			data.inState = true;// 弹出添加窗口
	}
	const go2Update = (obj) => {
		console.log(obj);
		data.state = 0;// 修改
		data.inState = true;// 弹出窗口
		data.course = JSON.parse(JSON.stringify(obj)); // 初始化对象并赋值
	}
	const save = () => {
		//三目运算获取得到url
		let url = data.state == 0 ? "/api/adm/course/update":"/api/adm/course/add";
		//type走JSON格式
		$postj(url,data.course).then( (resp) => {
			console.dir(resp.data.data)
			data.courses = resp.data.data
			data.state = -1
			data.inState = false
			}
		)
	}
	const del = (id) => {
		$get("/api/adm/course/del?cno=" + id).then( (resp) => {
			console.dir(resp.data.data)
			data.courses = resp.data.data;
		})
	}
	
	onMounted(() => {
		$get(`/api/adm/course/findAll`).then((resp) => {
			console.log(resp.data);
			data.courses = resp.data.data
		})
	})
	
</script>

<style>
	#data {
		position: absolute;
		background-color: blanchedalmond;
		z-index: 1;/* 显示在最顶层 */
		width: 50%;/* 设置弹出框的跨度 */
		left: 25%;/* 设置弹出框到左边的距离 */
		top: 10vh;/* 设置弹出框到下边的距离 */
		opacity: 0.9;
	}
</style>